<template>
  <div class="page-warp">
    <canvas id="cas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    /** @type {HTMLCanvasElement} */
    let geoData = [];
    // canvas的dom对象
    let canvasDom = document.getElementById("cas");
    // canvas对象
    let ctx = canvasDom.getContext("2d");
    // canvas圆度的高宽
    let canvasW = (canvasDom.width = canvasDom.offsetWidth);
    let canvasH = (canvasDom.height = canvasDom.offsetHeight);
    // let canvasW = canvasDom.width = (window.innerWidth - 200)
    // let canvasH = canvasDom.height = (window.innerHeight - 60)
    // 地图中心经纬度
    let mapCenterX = 0;
    let mapCenterY = 0;
    // 缩放系数
    let scale = 1;
    // 鼠标时间得位置信息
    let offsetX = 0,
      offsetY = 0;
    // 获取地图对应的geoJosn数据
    // 获取对应地图地址--> 阿里的数据可视化平台dataV.geoAtlas http://datav.aliyun.com/portal/school/atlas/area_selector
    let request = new XMLHttpRequest();
    request.open(
      "get",
      "https://geo.datav.aliyun.com/areas_v3/bound/430000_full.json"
    );
    request.send();
    request.onload = function () {
      if (request.status === 200) {
        geoData = JSON.parse(request.responseText);
        let north = 90; //北纬极值
        let south = -90; //南纬极值
        let west = -180; //西经极值
        let east = 180; // 东经极值
        geoData.features.forEach((item) => {
          // item 每个市的数据
          if (item.geometry.type === "Polygon") {
            //将MultiPolygon和Polygon格式的地图处理成统一数据格式
            item.geometry.coordinates = [item.geometry.coordinates];
          }
          item.geometry.coordinates.forEach((area) => {
            // area[0] 每个市的经纬度数据合集
            area[0].forEach((v) => {
              if (v[1] < north) {
                north = v[1];
              }
              if (v[1] > south) {
                south = v[1];
              }
              if (v[0] > west) {
                west = v[0];
              }
              if (v[0] < east) {
                east = v[0];
              }
            });
          });
        });
        //计算整个地图的高宽
        let mapWidth = Math.abs(west - east);
        let mapHeight = Math.abs(south - north);
        mapCenterX = (west + east) / 2;
        mapCenterY = (south + north) / 2;
        // 计算地图缩放系数
        let wScale = canvasW / mapWidth;
        let hScale = canvasH / mapHeight;
        scale = wScale > hScale ? wScale : hScale;
        console.log(mapCenterX, mapCenterY, wScale);
        // 将经纬度坐标转换为屏幕坐标
        function toScreenPosition(horizontal, vertical) {
          return {
            x: (horizontal - mapCenterX) * scale,
            y: (mapCenterY - vertical) * hScale,
          };
        }
        /*
        开始绘图
        */
        //1.清楚整个画布
        drawMap();
        function drawMap() {
          ctx.clearRect(0, 0, canvasW, canvasH);
          //清楚之前的路径 开始也个新路径
          // ctx.beginPath();
          ctx.fillStyle = "#000E1A";
          ctx.fillRect(0, 0, canvasW, canvasH);

          //2.绘制每个子区域
          geoData.features.forEach((item, index) => {
            // console.log(index)
            let centerX = canvasW / 2;
            let centerY = canvasH / 2;
            item.geometry.coordinates.forEach((area, ai) => {
              // 保存之前子区域的绘图状态
              ctx.save();
              // 开始新的子区域路径
              ctx.beginPath();
              // 重新设置坐标系中心点
              ctx.translate(centerX, centerY);
              area[0].forEach((v, i) => {
                let position = toScreenPosition(v[0], v[1]);
                if ((i = 0)) {
                  //每个子区域的起点
                  ctx.moveTo(position.x, position.y);
                } else {
                  ctx.lineTo(position.x, position.y);
                }
              });
              if (ctx.isPointInPath(offsetX, offsetY)) {
                ctx.fillStyle = "gary";
              } else {
                ctx.fillStyle = "#004444";
              }
              // 闭合路径
              ctx.closePath();
              ctx.strokeStyle = "#A098FC";
              ctx.lineWidth = 1;
              ctx.fill();
              ctx.stroke();
              ctx.restore();
            });
          });
          //3.标注文字
          geoData.features.forEach((item) => {
            ctx.save();
            ctx.beginPath();
            ctx.translate(canvasW / 2, canvasH / 2);
            ctx.fillStyle = "#fff";
            ctx.font = "20px Microsoft YaHei";
            ctx.textAlign = "center";
            ctx.textBaseLine = "middle";
            let x = 0,
              y = 0;
            if (item.properties.cp) {
              x = item.properties.cp[0];
              y = item.properties.cp[1];
            } else if (item.properties.centroid) {
              x = item.properties.centroid[0];
              y = item.properties.centroid[1];
            } else if (item.properties.center) {
              x = item.properties.center[0];
              y = item.properties.center[1];
            }
            let position = toScreenPosition(x, y);
            ctx.fillText(item.properties.name, position.x, position.y);
            ctx.restore();
          });
        }

        //4. 监听鼠标事件
        canvasDom.addEventListener("mousemove", (e) => {
          offsetX = e.offsetX;
          offsetY = e.offsetY;
          drawMap();
        });
        canvasDom.addEventListener("mousewheel", (e) => {
          if (e.deltaY > 0) {
            //鼠标下滚
            if (scale > 10) {
              scale -= 10;
            }
          } else {
            scale += 10;
          }
          drawMap();
        });
        // 鼠标点击事件
        canvas.addEventListener("click", function (event) {
          offsetX = event.offsetX;
          offsetY = event.offsetY;
          eventType = "click";
          drawMap();
        });
      }
    };
  },
};
</script>
<style lang="scss">
.page-warp {
  height: calc(100% - 60px);
  // width: 100%;
  margin-left: 200px;
  canvas {
    display: block;
    width: 100%;
    height: 100%;
  }
}
</style>